<template>
	<view class="content">
		<!--居住信息-->
		<view class="content_1">
			<view class="title">居住位置</view>
			<view class="line_title"></view>
			<view class="locate_view" @click="Address">
				<view class="get_locate">{{house_name}}</view>
				<image class="location_icon" src="../../../../static/index/detail/location_icon.svg"></image>
			</view>
		</view>
		<!-- 个人信息输入框 -->
		<view class="content_8">
			<view class="title">个人信息</view>
			<view class="line_title"></view>
			<view class="input_view">
				<view class="input_name">姓名</view>
				<view class="input_box">
					<input class="input_8" placeholder="请输入" :value="inputUser_name" @input="inputButton($event,'user_name')" />
				</view>
			</view>
			<view class="input_view">
				<view class="input_name">电话</view>
				<view class="input_box">
					<input class="input_8" placeholder="请输入" :value="inputUser_phone" @input="inputButton($event,'user_phone')" />
				</view>
			</view>
		</view>
		<!--楼层、户型-->
		<view class="content_8">
			<view class="title">楼层、户型选择</view>
			<view class="line_title"></view>
			<view class="input_view">
				<view class="input_name">单元</view>
				<view class="input_box">
					<input class="input_8" placeholder="单行输入" :value="inputUnit" @input="inputButton($event,'unit')" />
				</view>
			</view>
			<view class="input_view">
				<view class="input_name">楼层</view>
				<view class="input_box">
					<input class="input_8" placeholder="单行输入" :value="inputFloor" @input="inputButton($event,'floor')" />
				</view>
			</view>
			<!-- 有无电梯 -->
			<picker style="margin-top: 30upx;" class="choose_box" :class="data.lift == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'liftList')"
			 :value="data.lift" :range="liftList" range-key="show_name">
				<view class="choose_text">{{liftList[data.lift].show_name}}</view>
				<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
			</picker>
		</view>
		<!--房屋信息-->
		<view class="content_2">
			<view class="title">房屋信息</view>
			<view class="line_title"></view>
			<!--房屋信息picker弹窗-->
			<view class="choose_view">
				<!-- 室 -->
				<picker class="choose_box" :class="data.living == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'livingList')" :value="data.living" :range="livingList"
				 range-key="show_name">
					<view class="choose_text">{{livingList[data.living].show_name}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 房 -->
				<picker class="choose_box" :class="data.bed == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'bedList')" :value="data.bed" :range="bedList" range-key="show_name">
					<view class="choose_text">{{bedList[data.bed].show_name}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 卫 -->
				<picker class="choose_box" :class="data.toilet == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'toiletList')" :value="data.toilet" :range="toiletList"
				 range-key="show_name">
					<view class="choose_text">{{toiletList[data.toilet].show_name}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
			</view>
		</view>
		<!--最低签约时长-->
		<view class="content_3">
			<view class="title">最低签约时长</view>
			<view class="line_title"></view>
			<view class="choose_time_view">
				<block v-for="(data, index) in signTime" :key="index">
					<view :class="[data.status == 1 ? 'time_box_active' : 'time_box']" @click="toChoose(index, 'signTime')">{{data.show_name}}</view>
				</block>
			</view>
		</view>
		<!--租金额-->
		<view class="content_7">
			<view class="title">租金额</view>
			<view class="line_title"></view>
			<view class="range_money">
				<view class="money">¥ {{startmoney}} - ¥ {{endmoney}}</view>
			</view>
			<view class="rang_view">
				<range-slider :min="min_money" :max="max_money" :values="range_money" :step="step" class="range_choose" @rangechange='rangeChange'></range-slider>
			</view>
			<view class="rang_font">
				<view>¥ 0</view>
				<view>¥ 不限</view>
			</view>
		</view>
		<!--房屋特色-->
		<view class="content_4">
			<view class="title">房屋特色</view>
			<view class="line_title"></view>
			<view class="special_view">
				<block v-for="(data, index) in lableList" :key='index'>
					<view :class="[data.status == 1 ? 'choose_house_special':'house_special']" @click="toChoose(index, 'lableList')">{{data.show_name}}</view>
				</block>
			</view>
		</view>
		<!--配套措施-->
		<view class="content_10">
			<view class="title_10">设施配置</view>
			<view class="line_title"></view>
			<view class="equipment_view">
				<block v-for="(data, index) in house_detail_equipment" :key='index'>
					<view :class="[data.status == 1 ? 'equipment_box_choose' : 'equipment_box']" @click="toChooses(index, 'house_detail_equipment', 'equipmentId')">
						<image :class="[data.status == 1 ? 'equipment_img_choose' : 'equipment_img']" :src="data.image"></image>
						<view class="equipment_name">{{data.show_name}}</view>
					</view>
				</block>
			</view>
		</view>
		<!--备注-->
		<view class="content_5">
			<view class="title">备注 </view>
			<view class="line_title"></view>
			<textarea class="remarks_input" placeholder="多行输入内容" :value="inputRemarks" @input="inputButton($event,'remarks')"></textarea>
		</view>
		<!--底部提交-->
		<view class="content_6">
			<view class="contract_view">
				<view class="contract_icon_view" v-if="readstate == '0'" @click="readContract"></view>
				<view class="contract_icon_view" style="border: 5upx solid #5555FF;" v-if="readstate == '1'" @click="readContract">
					<view class="contract_icon"></view>
				</view>
				<view class="contract">勾选即代表已同意 <br>
					<view  style="color: #B3E9DC; font-weight: bold;"> 《用户使用协议》和《隐私声明》</view>
				</view>
			</view>
			<view class="submit" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	//引入子组件
	import Range from '../../../../components/range-slider/range-slider.vue';
	//导入接口请求文件
	import {Request} from '../../../../utils/request.js';
	const app = getApp();
	export default {
		//注册子组件
		components: {
			Range
		},
		data() {
			return {
				//获取当前位置
				house_name: '获取当前位置',
				//初始选中最小租金
				startmoney: '',
				//初始选中最大租金
				endmoney: '',
				range_money: [],
				max_money: '',
				min_money: '',
				//设置步长
				step: '',
				readstate: 1,
				data: {
					citys: 0,
					classify: 0,
					hot: 0,
					living: 0,
					bed: 0,
					toilet: 0,
					lift: 0,
				},
				//城市列表
				citysList: [],
				//区域列表
				classifyList: [],
				//热点列表
				hotList: [],
				//室列表
				livingList: [],
				//房列表
				bedList: [],
				//卫列表
				toiletList: [],
				//最低签约时长
				signTime: [],
				//房屋标签列表
				lableList: [],
				//备注输入信息
				inputRemarks: [],
				arr: Array(),
				//设施配置列表
				house_detail_equipment: [],
				//有无电梯列表
				liftList: [
					{
						id: 1,
						show_name: '有电梯'
					},
					{
						id: 2,
						show_name: '无电梯'
					}
				],
				//单元输入框
				inputUnit: '',
				//楼层输入框
				inputFloor: '',
				//姓名输入框
				inputUser_name: '',
				//电话输入框
				inputUser_phone: '',
			}
		},
		methods: {
			//Address
			Address:function(){
				let that = this;
				uni.chooseLocation({
					latitude: that.latitude,
					longitude: that.longitude,
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						that.house_name = res.name;
						that.house_address = res.address;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
				    }
				});
			},
			//获取子组件传过来的值
			rangeChange:function (res) {
				// console.log(res)
				this.startmoney = res.minValue
				this.endmoney = res.maxValue
			},
			//picker选择改变
			pickerChange: function(e, val) {
				let index = e.target.value;
				if(val == 'citysList'){
					this.citysId = this.citysList[index].areaId;
					this.data.citys = index;
				}
				if(val == 'classifyList'){
					this.classifyId = this.classifyList[index].areaId;
					this.data.classify = index;
				}
				if(val == 'hotList'){
					this.hotId = this.hotList[index].id;
					this.data.hot = index;
				}
				if(val == 'livingList'){
					this.livingId = this.livingList[index].id;
					this.data.living = index;
				}
				if(val == 'bedList'){
					this.bedId = this.bedList[index].id;
					this.data.bed = index;
				}
				if(val == 'toiletList'){
					this.toiletId = this.toiletList[index].id;
					this.data.toilet = index;
				}
				if (val == 'liftList') {
					this.liftId = this.liftList[index].id;
					this.liftText = this.liftList[index].show_name;
					this.data.lift = index;
				}
			},
			//最低签约时长 | 特色标签 选择
			toChoose: function(index, arr) {
				for(let i=0,l=this[arr].length; i<l; i++){
					if(index == i){
						this[arr][index].status = 1
					}else{
						this[arr][i].status = 2
					}
				}
				if(arr == 'signTime'){
					this.chooseTimeId = this[arr][index].id;
					console.log('this.chooseTimeId',this.chooseTimeId)
				}
				if(arr == 'lableList'){
					this.chooseLableId = this[arr][index].id;
					console.log('this.chooseLableId',this.chooseLableId)
				}
				
			},
			//多项选择器
			toChooses: function(index, arr, container){
				for (let i = 0, l = this[arr].length; i < l; i++) {
					let newArr = container;
					if (index == i) {
						if(this[arr][index].status != 1){
							//未选择
							this[arr][index].status = 1;
							if(this[newArr] == 'undefined'){
								this[newArr] = [];
								this[newArr].push(this[arr][index].id);
							}else {
								let valueIndex = this[newArr].indexOf(this[arr][index].id);
								if(valueIndex == -1){
									this[newArr].push(this[arr][index].id);
								}
							}
						}else {
							//以选择
							this[arr][index].status = 2;
							if(this[newArr] != undefined){
								let valueIndex = this[newArr].indexOf(this[arr][index].id);
								if(valueIndex != -1){
									this[newArr].splice(valueIndex, 1);
								}
							}
						}
						break;
					}
				}
				console.log('house_detail_equipment',this.equipmentId);
			},
			//监听输入
			inputButton: function(e, data){
				if(data == 'remarks'){
					this.inputRemarks = e.detail.value;
				}
				if(data == 'unit'){
					this.inputUnit = e.detail.value;
				}
				if(data == 'floor'){
					this.inputFloor = e.detail.value;
				}
				if(data == 'user_name'){
					this.inputUser_name = e.detail.value;
				}
				if(data == 'user_phone'){
					this.inputUser_phone = e.detail.value;
				}
			},
			//阅读合同
			readContract: function() {
				if (this.readstate == 0) {
					this.readstate = 1
				} else {
					this.readstate = 0
				}
			},
			//提交
			submit: function(){
				if(this.readstate != 1){
					new Request().showToast('请勾选协议');
					return;
				}
				if(this.livingId == '' || this.livingId == undefined || this.livingId == 0){
					new Request().showToast('房屋信息不齐');
					return;
				}
				if (this.inputUser_name == '' || this.inputUser_name == undefined || this.inputUser_phone == '' || this.inputUser_phone == undefined) {
					new Request().showToast('个人信息不齐');
					return;
				}
				if(this.bedId == '' || this.bedId == undefined || this.bedId == 0){
					new Request().showToast('房屋信息不齐');
					return;
				}
				if(this.toiletId == '' || this.toiletId == undefined || this.toiletId == 0){
					new Request().showToast('房屋信息不齐');
					return;
				}
				if(this.chooseTimeId == '' || this.chooseTimeId == undefined){
					new Request().showToast('最低签约时长未选择');
					return;
				}
				if(this.chooseLableId == '' || this.chooseLableId == undefined){
					new Request().showToast('房屋特色未选择');
					return;
				}
				var PostData = {
					'livingId': this.livingId,
					'bedId': this.bedId,
					'toiletId': this.toiletId,
					'chooseTimeId': this.chooseTimeId,
					'chooseLableId': this.chooseLableId,
					'startmoney': this.startmoney,
					'endmoney': this.endmoney,
					'openid': app.globalData.openid,
					'push_id': this.push_id,
					'house_name': this.house_name,
					'house_address': this.house_address,
					'latitude': this.latitude,
					'longitude': this.longitude,
					'liftText': this.liftList[0].show_name,
					'user_name': this.inputUser_name,
					'user_phone': this.inputUser_phone,
				}
				//备注
				if (this.inputRemarks != '' && this.inputRemarks != undefined) {
					let obj = {'inputRemarks': this.inputRemarks};
					var PostData = Object.assign({}, PostData, obj);
				}
				//单元
				if (this.inputUnit != '' && this.inputUnit != undefined) {
					let obj = {'inputUnit': this.inputUnit};
					var PostData = Object.assign({}, PostData, obj);
				}
				//楼层
				if (this.inputFloor != '' && this.inputFloor != undefined) {
					let obj = {'inputFloor': this.inputFloor};
					var PostData = Object.assign({}, PostData, obj);
				}
				//电梯
				if (this.liftText != '' && this.liftText != undefined) {
					let obj = {'liftText': this.liftText};
					var PostData = Object.assign({}, PostData, obj);
				}
				//措施
				if (this.equipmentId != '' && this.equipmentId != undefined){
					let obj = {'equipmentId': this.equipmentId};
					var PostData = Object.assign({}, PostData, obj);
				}
				console.log(PostData);
				let url = 'customer/push/Edit_Push_Info/edit';
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return PostData;
					},
					(res)=>{
						if(res.data.code == 1){
							new Request().showToast('修改成功', 'success', ()=>{
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									});
								},2000);
							});
						}
					}
				);
			}
		},
		onLoad(option) {
			this.push_id = option.push_id;
			if(app.globalData.Logincode == -1){
				new Request().showToast('您还未登陆','none', ()=>{
					setTimeout(()=>{
						uni.switchTab({url: '/pages/mine/mine',});
					},2001);
				});
				return;
			}
			let PostApi = (url, PostData, Response) => {
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return PostData;
					},
					(res)=>{
						Response(res);
					}
				);
			}
			let that = this;
			new Request('customer/push/Get_Push_List/GetCustomerPushId').request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
						push_id: option.push_id,
					};
				},
				(response)=>{
					let resData = response.data.data;
					//个人信息
					that.inputUser_name = resData.user_name;
					that.inputUser_phone = resData.user_phone;
					//措施id列表
					this.equipmentId = response.data.equipment;
					//地址信息
					that.house_name = resData.house_name;
					that.house_address = resData.house_address;
					that.latitude = resData.latitude;
					that.longitude = resData.longitude;
					//单元信息
					if(resData.unit_text != '' || resData.unit_text != undefined){
						that.inputUnit = resData.unit_text;
					}
					//楼层信息
					if(resData.floor_text != '' || resData.floor_text != undefined){
						that.inputFloor = resData.floor_text;
					}
					//电梯信息
					that.liftList.map((e,n)=>{
						if(e.show_name == resData.elevator_text){
							that.data.lift = n;
							that.liftText = resData.elevator_text;
						}
					});
					//备注信息
					if(resData.text != '' || resData.text != undefined){
						that.inputRemarks = resData.text;
					}
					//获取室列表
					//1是 室表，2是 房表，3是 卫表， 4是最低签约时长，5是特色标签
					PostApi('customer/push/Get_Push_List/GetList', {type: 1}, (res)=>{
						that.livingList = res.data.data;
						that.livingList.unshift({id: 0,show_name: '请选择'});
						that.livingList.map((e,n)=>{
							if(e.id == resData.shi_id){
								that.data.living = n;
								that.livingId = e.id;
								return;
							}
						});
					});
					//房列表
					PostApi('customer/push/Get_Push_List/GetList', {type: 2}, (res)=>{
						that.bedList = res.data.data;
						that.bedList.unshift({id: 0,show_name: '请选择'});
						that.bedList.map((e,n)=>{
							if(e.id == resData.fan_id){
								that.data.bed = n;
								that.bedId = e.id;
								return;
							}
						});
					});
					//卫列表
					PostApi('customer/push/Get_Push_List/GetList', {type: 3}, (res)=>{
						that.toiletList = res.data.data;
						that.toiletList.unshift({id: 0,show_name: '请选择'});
						that.toiletList.map((e,n)=>{
							if(e.id == resData.wei_id){
								that.data.toilet = n;
								that.toiletId = e.id;
								return;
							}
						});
					});
					//最低签约时长列表
					PostApi('landboos/Create_House/GetRentType', {
						table: 'fa_renthouse_master_rentmoney'
					}, (res) => {
						res.data.data.map((e)=>{
							if(e.id == resData.time_id){
								e.status = 1;
								that.chooseTimeId = e.id;
								e.show_name = e.describes;
								return;
							}else{
								e.status = 2;
								e.show_name = e.describes;
							}
						});
						that.signTime = res.data.data
					});
					//最低签约时长列表
					// PostApi('customer/push/Get_Push_List/GetList', {type: 4}, (res)=>{
					// 	that.signTime = res.data.data;
					// 	that.signTime.map((e,n)=>{
					// 		if(e.id == resData.time_id){
					// 			e.status = 1;
					// 			that.chooseTimeId = e.id;
					// 			return;
					// 		}
					// 	});
					// });
					//房屋特色标签列表
					PostApi('customer/push/Get_Push_List/GetList', {type: 5}, (res)=>{
						that.lableList = res.data.data;
						that.lableList.map((e,n)=>{
							if(e.id == resData.tip_id){
								e.status = 1;
								that.chooseLableId = e.id;
								return;
							}
						});
					});
					//获取措施列表
					PostApi('landboos/Create_House/GetRentType', {
						table: 'fa_renthouse_master_equipment'
					}, (res) => {
						res.data.data.map((e)=>{return e.status = 2;});
						that.house_detail_equipment = res.data.data;
						if(that.equipmentId == 'undefined'){
							return;
						}
						that.house_detail_equipment.map((item, i)=>{
							that.equipmentId.map((info, index)=>{
								if(item.id == info){
									return item.status = 1;
								}
							});
						});
					});
					//租金范围
					PostApi('customer/push/Get_Push_List/GetRent', {type: 6}, 
					(res)=>{
						// that.startmoney = res.data.data.choose_min;
						// that.endmoney = res.data.data.choose_max;
						that.startmoney = resData.rent_money_start;
						that.endmoney = resData.rent_money_end;
						that.max_money = res.data.data.max;
						that.min_money = res.data.data.min;
						that.step = res.data.data.step;
						that.range_money = [that.startmoney, that.endmoney];
					});
				}
			);
			
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 200upx;
	}
	
	/*
		居住信息样式
	*/
	.content_1 {
		margin: 0 40upx;
		margin-top: 40upx;
	}
	
	.title {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}
	
	.line_title {
		height: 6upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 4upx;
	}
	
	.locate_view {
		height: 88upx;
		margin-top: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		line-height: 88upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.get_locate {
		margin-left: 30upx;
		color: #2d2d2d;
	}
	
	.location_icon {
		height: 47upx;
		width: 47upx;
		margin-right: 30upx;
	}
	
	.choose_view {
		height: 60upx;
		margin: 0 5upx;
		margin-top: 15upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.choose_box {
		width: 200upx;
		height: 60upx;
		border-radius: 60upx;
		border: 5upx solid #D1D1D1;
		box-sizing: border-box;
		padding: 10upx 20upx 10upx 30upx;
		position: relative;
	}
	
	.choose_box_active {
		width: 200upx;
		height: 60upx;
		border-radius: 60upx;
		border: 5upx solid #B3E9DC;
		box-sizing: border-box;
		padding: 10upx 20upx 10upx 30upx;
		position: relative;
	}
	
	.choose_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
	}
	
	.choose_icon {
		height: 28upx;
		width: 28upx;
		position: absolute;
		top: 15upx;
		right: 20upx;
	}
	
	/*
		房屋信息样式
	*/
	.content_2 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	/*
		最低签约时长样式
	*/
	.content_3 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.choose_time_view {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.time_box {
		height: 60upx;
		width: 160upx;
		line-height: 50upx;
		border-radius: 60upx;
		box-sizing: border-box;
		border: 5upx solid #B3E9DC;
		text-align: center;
		font-size: 28upx;
		color: #666666;
		margin: 10upx 0;
	}
	
	.time_box_active {
		height: 60upx;
		width: 160upx;
		line-height: 60upx;
		border-radius: 60upx;
		background-color: #B3E9DC;
		text-align: center;
		font-size: 28upx;
		color: #FFFFFF;
		margin: 10upx 0;
	}
	
	/*
		房屋特色样式
	*/
	.content_4 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.special_view {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}
	
	.house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #999999;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}
	
	/* 选择的css */
	.choose_house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		background: #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #FFFFFF;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}
	
	/*
		备注样式
	*/
	.content_5 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.remarks_input {
		height: 180upx;
		width: 568upx;
		margin: 0 auto;
		margin-top: 20upx;
		background-color: #FFFFFF;
		font-size: 28upx;
		color: #888888;
		padding: 10upx;
	}
	
	/*
		底部提交样式
	*/
	.content_6 {
		position: fixed;
		z-index: 9999;
		height: 100upx;
		width: 714upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 40upx;
	}
	
	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}
	
	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}
	
	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}
	
	.contract {
		width: 410upx;
		font-size: 26upx;
		color: #FFFFFF;
	}
	
	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
	
	/*
		租金额样式
	*/
	.content_7 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.range_money {
		height: 100upx;
		display: flex;
		align-items: center;
	}
	
	.money {
		margin: 0 auto;
		height: 20upx;
		line-height: 20upx;
		font-size: 28upx;
		color: #63D0D5;
	}
	
	.rang_view {
		height: 80upx;
		width: 600upx;
		margin: 0 auto;
	}
	
	.rang_font {
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #999999;
	}
	
	/*
		楼层、户型选择
	*/
	   
	.content_8{
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.input_view{
		height: 75upx;
		margin-top: 30upx;
		display: flex;
		align-items: center;
	}
	
	.input_name{
		font-size: 26upx;
		color: #2d2d2d;
		margin: 0 25upx;
	}
	
	.input_box{
		height: 75upx;
		width: 400upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		display: flex;
		align-items: center;
	}
	
	.input_8{
		height: 65upx;
		font-size: 26upx;
		margin: 0 auto;
		text-align: center;
	}
	
	/*
		配套设施样式
	*/
	.content_10 {
		margin: 0 15upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		border-radius: 26upx;
		padding: 30upx 25upx 7upx 25upx;
		display: flex;
		flex-direction: column;
	}
	
	.title_10 {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}
	
	.equipment_view {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap; //弹性盒元素换行
	}
	
	.equipment_box {
		height: 250upx;
		width: 194upx;
		background-color: #F0F0F0;
		border-radius: 20upx;
		margin-bottom: 23upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		color: #666666;
		padding: 10upx;
	}
	
	.equipment_box_choose {
		height: 250upx;
		width: 194upx;
		background-color: #8AE3D7;
		border-radius: 20upx;
		margin-bottom: 23upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		color: #FFFFFF;
		padding: 10upx;
	}
	
	.equipment_img_choose {
		height: 190upx;
		width: 190upx;
		background-color: #FFFFFF;
	}
	
	.equipment_img {
		height: 190upx;
		width: 190upx;
		background-color: #a1a1a1;
	}
	
	.equipment_name {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
	}
</style>
